<template>
<div>
  <input :id="inputId + '-input'" type="file" v-show="false" ref="file" v-on:change="uploadFile">
</div>
</template>

<script>
import * as qiniu from 'qiniu-js'
export default {
  name: "FileUpload",
  props: {
    inputId: {
      default: 'file-upload'
    },
    suffixs: {
      // 限制后缀类型
      type: Array,
      default: null
    },
    contributeType: {
      // 素材（投稿）类型
      default: null
    },
    uploadType: {
      // 上传类型 图片/音频
      default: null
    },
    afterUpload:{
      type: Function,
      default: null
    }
  },
  methods: {
    selectFile(){
      $('#' + this.inputId + '-input').click();
    },
    uploadFile(e) {
      const file = e.target.files[0]; //Blob 对象，上传的文件
      let suffixs = this.suffixs;
      let fileName = file.name;
      let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
      let validateSuffix = false;
      for(let i=0;i<suffixs.length;i++){
        if(suffixs[i].toLowerCase() === suffix){
          validateSuffix = true;
          break;
        }
      }

      if(!validateSuffix){
        alert("文件格式不正确！只支持上传："+suffixs.join(","));
        $("#"+this.inputId+"-input").val("");
        return;
      }

      this.$ajax.get(process.env.VUE_APP_SERVER + '/cloud/get_token', {

      }).then(res => {
        console.log("ajax"+ res.data.token)
        this.token = res.data.token
      })

      let  key = file.name

      let config = {
        useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
        region: qiniu.region.z2     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
      };

      let putExtra = {
        fname: '',  //文件原文件名
        params: {}, //用来放置自定义变量
        mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
      };
      console.log(this.token)
      var observable = qiniu.upload(file, key, this.token, putExtra, config);
      observable.subscribe({
        next: result => {
          // 主要用来展示进度
          console.log(result);

        },
        error: errResult => {
          // 失败报错信息
          console.log(errResult);
        },
        complete: result => {
          // 接收成功后返回的信息
          console.log(result);
        }
      });
    }
  }
}
</script>

<style scoped>

</style>